'use client'

import React, { useState } from 'react'
import { FloatButton, Badge } from 'antd'
import { BugOutlined } from '@ant-design/icons'
import { useDevToolsStore } from '@/stores/devToolsStore'
import DevToolsPanel from './DevToolsPanel'

export function DevToolsToggle() {
    const [panelVisible, setPanelVisible] = useState(false)
    const { isEnabled, apiLogs } = useDevToolsStore()

    // 只在开发环境显示
    if (process.env.NODE_ENV !== 'development' || !isEnabled) {
        return null
    }

    return (
        <>
            <FloatButton
                icon={
                    <Badge count={apiLogs.length} size="small" offset={[0, 0]}>
                        <BugOutlined />
                    </Badge>
                }
                tooltip="开发者工具"
                onClick={() => setPanelVisible(true)}
                style={{
                    right: 24,
                    bottom: 24,
                }}
            />

            <DevToolsPanel
                visible={panelVisible}
                onClose={() => setPanelVisible(false)}
            />
        </>
    )
}

export default DevToolsToggle